<template>
  <v-ace-editor
    v-model:value="content"
    @init="editorInit"
    lang="json"
    :options="{
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      fontSize: 14,
      tabSize: 2,
      showPrintMargin: false,
      highlightActiveLine: true,
    }"
    theme="monokai"
    style="height: 600px; background: #000; color: #fff"
    @change="handleChange"
  />
</template>

<script>
import * as ace from "ace-builds";
ace.config.set("basePath", "/static/src-min-noconflict/");

import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/snippets/sql";
import "ace-builds/src-noconflict/mode-sql";
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/mode-html";
import "ace-builds/src-noconflict/mode-html_elixir";
import "ace-builds/src-noconflict/mode-html_ruby";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/snippets/less";
import "ace-builds/src-noconflict/theme-chrome";
import "ace-builds/src-noconflict/ext-static_highlight";
import "ace-builds/src-noconflict/ext-beautify";
import "ace-builds/src-noconflict/mode-json";

import { VAceEditor } from "vue3-ace-editor";
export default {
  name: "JsonEditorComp",
  components: {
    VAceEditor,
  },
  data() {
    return {
      content: "",
    };
  },
  props: {
    contentCode: {
      type: String,
      default: "",
    },
  },
  methods: {
    editorInit() {
      this.content = this.contentCode;
    },
    // 监听内容修改，并传给父级
    handleChange() {
      this.$emit("updateFun", this.content);
    },
  },
};
</script>

<style>
/* 修改光标颜色 */
.ace_cursor {
  color: #fff !important;
}
</style>
